<template>
  <div class="Myhome">
    <el-container style="height: 500px; border: 1px solid #eee">
        
      <el-aside width="200px" style="background-color:#20222a">
          <div id="logo">
              <img class="logo" src="../assets/logo.png" alt="">
              <p>后台管理系统</p>
          </div>
          <!-- 路由跳转 -->
        <el-menu style="background-color:#515a6e;color:#cbced4;">
            <!-- 主页 -->
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-office-building"></i> <router-link to="/myhome/er">主页</router-link> </template>
          </el-submenu>
            <!-- 单独的路由 -->
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-help"></i> <router-link to="/myhome/ddly">单独的路由</router-link> </template>
          </el-submenu>
          <!-- 外链 -->
            <el-submenu index="3">
            <template slot="title"><i class="el-icon-right"></i> <router-link to="/myhome/wl">外链</router-link> </template>
            </el-submenu>
            <!-- 二级菜单 -->
          <el-submenu index="4">
            <template slot="title"
              ><i class="el-icon-setting"></i><router-link to="">二级菜单</router-link></template
            >
                <!-- 二级菜单下拉 -->
                    <!-- 表格 -->
            <el-menu-item-group style="background-color:#363e4f;">
              <el-menu-item index="3-1"> <i class="el-icon-tickets"></i><span style="color:#c3c5cb">表格</span></el-menu-item>
            </el-menu-item-group>
                    <!-- 外链 -->
            <el-menu-item-group style="background-color:#363e4f;">
              <el-menu-item index="3-3"> <i class="el-icon-document-remove"></i><span style="color:#c3c5cb">外链</span></el-menu-item>
            </el-menu-item-group>
                    <!-- 三级菜单 -->
            <el-submenu index="3-4" style="background-color:#363e4f;">
              <template slot="title" style="background-color:#363e4f;" ><span style="color:#c3c5cb">三级菜单</span></template>
                    <el-menu-item index="3-4-1" style="background-color:#363e4f;"><span style="color:#c3c5cb">查看消息</span></el-menu-item>
                    <el-menu-item index="3-4-1" style="background-color:#363e4f;"><span style="color:#c3c5cb">修改密码</span></el-menu-item>
                    <el-menu-item index="3-4-1" style="background-color:#363e4f;"><span style="color:#c3c5cb">基本资料</span></el-menu-item>
                    <el-menu-item index="3-4-1" style="background-color:#363e4f;"><span style="color:#c3c5cb">外链</span></el-menu-item>
            </el-submenu>
          </el-submenu>

        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size:20px" class="dropdown">
        <div class="div"><i class="el-icon-s-custom"></i></div>
        <span>黎文莹</span>
          <el-dropdown>
            <i class="el-icon-caret-bottom" style="margin-left: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item>基本信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <!-- <el-main>
          <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
        </el-main> -->
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Myhome",
};
</script>

<style scoped>
.dropdown {
  display: flex;
  align-items: center;
  justify-content: end;
}
a {
    color: #c3c5cb;
}
.dropdown .div {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16px;
}
.dropdown .div i {
  text-align: center;
  line-height: 50px;
}
.dropdown i {
  font-size: 20px;
}
#logo {
  display: flex;
  align-items: center;
  height: 80px;
  justify-content: space-around;
}
.logo {
  width: 40px;
  height: 40px;
}
#logo p {
  font-size: 18px;
  color: #d2d3d4;
  font-weight: bold;
}
</style>